<script >
import { type1 } from '../assets/publicOption'
import Time from '../component/time.vue'
import * as echarts from 'echarts'
export default {
    components: { Time },
    data() {
        return {
            formInline: {},
            // echarts的数据
            // #region

            option1: { ...this.$store.state.station4.option1Data, ...type1 },
            option2: { ...this.$store.state.station4.option2Data, ...type1 },
            option3: { ...this.$store.state.station4.option3Data, ...type1 },
            option4: { ...this.$store.state.station4.option4Data, ...type1 },
            option5: { ...this.$store.state.station4.option5Data, ...type1 },
            option6: { ...this.$store.state.station4.option6Data, ...type1 },
            option7: { ...this.$store.state.station4.option7Data, ...type1 },

            option8: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: {
                    top: 20,
                    left: 10,
                    text: '二氧化碳库存',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '二氧化碳库存',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },
            option9: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 20,
                        left: 10,
                        text: '产水含油',
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    },
                    {
                        top: 55,
                        left: 10,
                        text: '（mg/L）',
                        textStyle: {
                            color: '#75F9FD',
                            fontSize: 12
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '产水含油',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },

            option10: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 55,
                        left: 10,
                        text: '（mg/L）',
                        textStyle: {
                            color: '#75F9FD',
                            fontSize: 12
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '悬浮',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },

            option11: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 20,
                        left: 10,
                        text: '产水硬度',
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    },
                    {
                        top: 55,
                        left: 10,
                        text: '（mg/L）',
                        textStyle: {
                            color: '#75F9FD',
                            fontSize: 12
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '硬度',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },
            option12: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 20,
                        left: 10,
                        text: '产水量',
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    },
                    {
                        top: 55,
                        left: 10,
                        text: '（mg/L）',
                        textStyle: {
                            color: '#75F9FD',
                            fontSize: 12
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '产水量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },

            option13: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#5087ec'],
                title: [
                    {
                        top: 20,
                        left: 10,
                        text: '反相破乳剂浓度',
                        textStyle: {
                            color: '#6DA7F0',
                            fontSize: 17
                        }
                    },
                    {
                        top: 55,
                        left: 10,
                        text: '（mg/L）',
                        textStyle: {
                            color: '#75F9FD',
                            fontSize: 12
                        }
                    }
                ],
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '反相破乳剂浓度',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#5087ec'
                        }
                    }
                ]
            },

            option14: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#a5ef4d'],
                title: {
                    top: 20,
                    left: 10,
                    text: '处理水量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '处理水量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#a5ef4d'
                        }
                    }
                ]
            },

            option15: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: {
                    top: 20,
                    left: 10,
                    text: '外输量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '外输量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#75f9fd'
                        }
                    }
                ]
            },
            option16: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f2bd42'],
                title: {
                    top: 20,
                    left: 10,
                    text: '外输油',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '外输油',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f2bd42'
                        }
                    }
                ]
            },
            option17: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#ff7372'],
                title: {
                    top: 20,
                    left: 10,
                    text: '含油',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 20
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '含油',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#ff7372'
                        }
                    }
                ]
            },
            option18: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f5f5f5'],
                title: {
                    top: 20,
                    left: 10,
                    text: '悬浮',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '悬浮',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f5f5f5'
                        }
                    }
                ]
            },
            option19: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#fefa83'],
                title: {
                    top: 20,
                    left: 10,
                    text: '处理液量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '处理液量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#fefa83'
                        }
                    }
                ]
            },
            option20: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#ccf783'],
                title: {
                    top: 20,
                    left: 10,
                    text: '进210池水',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '进210池水',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#ccf783'
                        }
                    }
                ]
            },
            option21: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: {
                    top: 20,
                    left: 10,
                    text: '进夏子街水',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '进夏子街水',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#75f9fd'
                        }
                    }
                ]
            },
            option22: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: {
                    top: 20,
                    left: 10,
                    text: '外输原油含水',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '外输原油含水',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#75f9fd'
                        }
                    }
                ]
            },
            option23: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f2bd42'],
                title: {
                    top: 20,
                    left: 10,
                    text: '含油',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '含油',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f2bd42'
                        }
                    }
                ]
            },
            option24: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f5f5f5'],
                title: {
                    top: 20,
                    left: 10,
                    text: '电导率',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '悬浮',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f5f5f5'
                        }
                    }
                ]
            },
            option25: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#fefa83'],
                title: {
                    top: 20,
                    left: 10,
                    text: '净化软水',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '净化软水',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#fefa83'
                        }
                    }
                ]
            },
            option26: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#ccf783'],
                title: {
                    top: 20,
                    left: 10,
                    text: '宇澄浓水',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '宇澄浓水',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#ccf783'
                        }
                    }
                ]
            },
            option27: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: {
                    top: 20,
                    left: 10,
                    text: '处理总量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '处理总量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#75f9fd'
                        }
                    }
                ]
            },
            option28: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#75f9fd'],
                title: {
                    top: 20,
                    left: 10,
                    text: '产水量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '产水量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#75f9fd'
                        }
                    }
                ]
            },
            option29: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f2bd42'],
                title: {
                    top: 20,
                    left: 10,
                    text: '排污量',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '排污量',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f2bd42'
                        }
                    }
                ]
            },
            option30: {
                backgroundColor: ' rgba(11, 21, 57)',
                color: ['#f5f5f5'],
                title: {
                    top: 20,
                    left: 10,
                    text: '电导率',
                    textStyle: {
                        color: '#6DA7F0',
                        fontSize: 17
                    }
                },
                grid: {
                    right: '10%',
                    left: '13%',
                    bottom: '10%',
                    top: '25%'
                },
                toolbox: {
                    right: '5%',
                    feature: {
                        saveAsImage: {
                            backgroundColor: '#0b1539',
                            excludeComponents: ['toolbox']
                        }
                    },
                    iconStyle: { borderColor: '#fff' }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    show: true,
                    textStyle: { color: '#fff' },
                    top: 50,
                    left: 'center'
                },
                // dataZoom: {
                //     type: 'slider',
                //     show: true,
                //     startValue: 0,
                //     endValue: 7,
                //     xAxisIndex: [0]
                // },
                xAxis: {
                    axisLabel: {
                        color: '#fff'
                    },
                    data: ['07/16', '07/17', '07/18', '07/19', '07/20', '07/21']
                },
                yAxis: {
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '悬浮',
                        type: 'line',
                        data: [54000, 53000, 52000, 54123, 56128, 55520],
                        label: {
                            show: true,
                            color: '#f5f5f5'
                        }
                    }
                ]
            },
            //   #endregion
            options: [
                this.option1,
                this.option2,
                this.option3,
                this.option4,
                this.option5,
                this.option6,
                this.option7,
                this.option8,
                this.option9,
                this.option10,
                this.option11,
                this.option12,
                this.option13,
                this.option14,
                this.option15,
                this.option16,
                this.option17,
                this.option18,
                this.option19,
                this.option20,
                this.option21,
                this.option22,
                this.option23,
                this.option24,
                this.option25,
                this.option26,
                this.option27,
                this.option28,
                this.option29,
                this.option30
            ]
        }
    },
    mounted() {
        this.$store.dispatch('station4/askData')
        // 注意：由于 Vue 的响应式系统，直接在 data 函数中引用 this.optionX 可能会导致问题
        // 因此，你可能需要在 mounted 钩子中重新构建 options 数组
        this.options = [
            this.option1,
            this.option2,
            this.option3,
            this.option4,
            this.option5,
            this.option6,
            this.option7,
            this.option8,
            this.option9,
            this.option10,
            this.option11,
            this.option12,
            this.option13,
            this.option14,
            this.option15,
            this.option16,
            this.option17,
            this.option18,
            this.option19,
            this.option20,
            this.option21,
            this.option22,
            this.option23,
            this.option24,
            this.option25,
            this.option26,
            this.option27,
            this.option28,
            this.option29,
            this.option30
        ]
        // 基于准备好的dom，初始化echarts实例
        setTimeout(() => {
            this.initChart()
        }, 100)
    },
    methods: {
        initChart() {
            // 使用 for 循环遍历数组
            // let itemCharts = []
            for (let i = 0; i < this.options.length; i++) {
                // 构造 DOM 元素的 ID
                const chartDomClass = `chart${i + 1}`
                // console.log(chartDomClass);
                // // 获取 DOM 元素
                const chartItemDom = document.querySelector('.' + chartDomClass)

                // 给各个表格加宽度和高度
                chartItemDom.style.width = '100%'
                chartItemDom.style.height = '100%'
                // console.log(chartItemDom)

                // console.log(this.options);

                // 初始化 ECharts 实例
                const itemChart = echarts.init(chartItemDom)
                // itemCharts.push(itemChart)
                // 设置配置项
                itemChart.setOption(this.options[i], true)
                window.addEventListener('resize', function () {
                    itemChart.resize()
                })
            }
            // console.log(itemCharts)
            // window.addEventListener('resize', function () {
            //     for (let i = 0; i < itemCharts.length; i++) {
            //         itemChart[i].resize()
            //     }
            // })
        },
        test() {
            this.$store.dispatch('station4/askData')
            // setTimeout(() => {
            //     this.$router.go(0)
            // }, 1)
        }
    }
}
</script>

<template>
    <div class="container">
        <div class="title-container" v-on:click="test">
            处理站关键药剂浓度
            <!-- 时间表 -->
            <p class="time"><Time /></p>
            <img
                class="title-img"
                style="height: 70px; width: 100%"
                src="../../../assets/imgs/head1.png"
            />
        </div>
        <div class="bottom">
            <!-- 处理站关键药剂浓度 -->
            <div class="crude-charging">
                <!-- 上部分 -->
                <div class="title">处理站关键药剂浓度</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item">
                        <div class="chart1" />
                    </div>
                    <div class="chart-item">
                        <div class="chart2" />
                    </div>
                    <div class="chart-item">
                        <div class="chart3" />
                    </div>
                </div>
            </div>

            <!-- 伴生气处理站运行情况 -->
            <div class="SAGD">
                <!-- 上部分 -->
                <div class="title">伴生气处理站运行情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item">
                        <div class="chart4" />
                    </div>
                    <div class="chart-item"><div class="chart5" /></div>
                    <div class="chart-item"><div class="chart6" /></div>
                    <div class="chart-item"><div class="chart7" /></div>
                    <div class="chart-item"><div class="chart8" /></div>
                    <div class="chart-item"></div>
                </div>
            </div>

            <!-- 冷凝水处理站运行情况 -->
            <div class="sewage-treatment">
                <!-- 上部分 -->
                <div class="title">冷凝水处理站运行情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item">
                        <!-- <div>(方/天)</div> -->
                        <div class="chart9" />
                    </div>
                    <div class="chart-item"><div class="chart10" /></div>
                    <div class="chart-item"><div class="chart11" /></div>
                    <div class="chart-item"><div class="chart12" /></div>
                    <div class="chart-item"><div class="chart13" /></div>
                    <div class="chart-item" />
                </div>
            </div>

            <!-- 夏子街就地分水情况 -->
            <div class="auxiliary-system">
                <!-- 上部分 -->
                <div class="title">夏子街就地分水情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart14" /></div>
                    <div class="chart-item"><div class="chart15" /></div>
                    <div class="chart-item"><div class="chart16" /></div>
                    <div class="chart-item"><div class="chart17" /></div>
                    <div class="chart-item"><div class="chart18" /></div>
                    <div class="chart-item" />
                </div>
            </div>

            <!-- 风南4运行情况 -->
            <div class="condensate-treatment">
                <!-- 上部分 -->
                <div class="title">风南4运行情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart19" /></div>
                    <div class="chart-item"><div class="chart20" /></div>
                    <div class="chart-item"><div class="chart21" /></div>
                    <div class="chart-item"><div class="chart22" /></div>
                    <div class="chart-item"><div class="chart23" /></div>
                    <div class="chart-item"><div class="chart24" /></div>
                </div>
            </div>

            <!-- MVC运行情况 -->
            <div class="MVC-operation">
                <!-- 上部分 -->
                <div class="title">MVC运行情况</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart25" /></div>
                    <div class="chart-item"><div class="chart26" /></div>
                    <div class="chart-item"><div class="chart27" /></div>
                    <div class="chart-item"><div class="chart28" /></div>
                    <div class="chart-item"><div class="chart29" /></div>
                    <div class="chart-item"><div class="chart30" /></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 120%;
    background-color: #02104f;
    border: 1px solid #797979;
    margin-bottom: 10px;
}
.title-container {
    height: 80px;
    position: relative;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    color: white;
    border-bottom: solid 2px #293e83;
    .time {
        font-size: 15px;
        position: absolute;
        right: 5%;
        top: 0;
        font-weight: normal;
    }
}

.title-img {
    position: absolute;
    top: 0;
    left: 0;
}

.bottom {
    background-color: #202033;
}
/* 原油处理 */
/* 05B2D1 */
.crude-charging {
    border-bottom: solid 2px #05b2d1;
    .title {
        padding-left: 20px;
        color: #05b2d1;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #05b2d1;
    }
}

//   chart样式
.chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    .chart-item {
        height: 450px;
        width: 33%;
        background-color: #0b1539;
        // border: 2px solid #33a2f8;
    }
}

// SAGD
.SAGD {
    border-bottom: solid 2px #75f9fd;
    .title {
        padding-left: 20px;
        color: #75f9fd;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #75f9fd;
    }
}
.sewage-treatment {
    border-bottom: solid 2px #6cff16;
    .title {
        padding-left: 20px;
        color: #6cff16;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #6cff16;
    }
}
.auxiliary-system {
    border-bottom: solid 2px #f2bd42;
    .title {
        padding-left: 20px;
        color: #f2bd42;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #f2bd42;
    }
}

// 冷凝水
.condensate-treatment .title {
    border-bottom: solid 2px #42f2e9;
    padding-left: 20px;
    color: #42f2e9;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
    background-color: #04051a;
    border-bottom: solid 2px #42f2e9;
}

// MVC
.MVC-operation .title {
    border-bottom: solid 2px #ff7372;
    padding-left: 20px;
    color: #ff7372;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
    background-color: #04051a;
    border-bottom: solid 2px #ff7372;
}

::v-deep .el-form {
    margin-top: 20px;
    height: 30px;
}
::v-deep .el-form-item__label {
    color: #6da7f0;
    font-size: 1.2em;
    margin-left: 50px;
}
::v-deep .el-input__inner {
    background-color: transparent !important;
    border: 0.5px solid #3f8fa5;
    color: white;
}
</style>
